Checkboxes and Radio buttons

Create consistent, cross-browser and cross-device checkboxes and radio buttons using the completely redesigned checks component in AiraCSS.

Checkboxes

Default checkbox

  

  
  Checked checkbox
  

Disabled Checkbox

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled checkbox
    
  


Disabled checked checkbox
  

Radios

Default radio
  
  


Default checked radio
  

Disbaled Radio

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled radio
    
  
  


Disabled checked radio
  

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

Default switch checkbox input
  
  


Checked switch checkbox input
  

Disabled Switch

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled switch checkbox input
  
  


Disabled checked switch checkbox input